<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>最近兑换地点查询</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="css/changeplace.css" />
	</head>
	<body>

		<div class="web">
			<div id="container">

			</div>
			
			<div class="centermsg">
				<p>赶紧前往张裕白兰地线下兑换点</p>
				<p>领取婚宴定制囍酒套装限量好礼!</p>
			</div>
			<span></span>

		</div>
		<script src="js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript" src="js/640commen.js"></script>
		<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.0&key=e58a568e1f74628ce963339fcc5f41eb"></script>
		<script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>

		<script type="text/javascript">
			function main(){
				$.ajax({
					url: "json/data.json",
					type: "get",
					dataType: "json",
					async: false,
					success: function(res) {
						jsonData = res; //jq自己返回出来的结果
						console.log(111);
						main2();
					}
				});
			}
			main();

			function main2() {
				console.log(jsonData);
				map = new AMap.Map('container', {
					zoom: 16
				});
				map.plugin('AMap.Geolocation', function() {
					geolocation = new AMap.Geolocation({
						enableHighAccuracy: true, //是否使用高精度定位，默认:true
						timeout: 10000, //超过10秒后停止定位，默认：无穷大
						maximumAge: 0, //定位结果缓存0毫秒，默认：0
						convert: true, //自动偏移坐标，偏移后的坐标为高德坐标，默认：true
						showButton: true, //显示定位按钮，默认：true
						buttonPosition: 'LB', //定位按钮停靠位置，默认：'LB'，左下角
						buttonOffset: new AMap.Pixel(10, 20), //定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
						showMarker: true, //定位成功后在定位到的位置显示点标记，默认：true
						showCircle: true, //定位成功后用圆圈表示定位精度范围，默认：true
						panToLocation: true, //定位成功后将定位到的位置作为地图中心点，默认：true
						zoomToAccuracy: true //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
					});

					map.addControl(geolocation);
					geolocation.getCurrentPosition();
					//			    AMap.event.addListener(geolocation, 'complete', onComplete);//返回定位信息
					AMap.event.addListener(geolocation, 'complete', function(e) {

//						new AMap.Marker({
//							map: map,
//							position: [e.position.lng, e.position.lat]
//						});
						var mylnglat = new AMap.LngLat(e.position.lng, e.position.lat);//获取当前位置的经纬度
						console.log(mylnglat);

						var d, index, mind; //距离
						for(var i = 0; i < jsonData.length; i++) {
							if(jsonData[i].JD) {
								//拿到当前位置与json文件上地点的当前距离
								d = mylnglat.distance([jsonData[i].JD, jsonData[i].WD]);
								console.log(d);
								if(i == 0) {
									index = i;
									mind = d;//把上一个距离赋给mind
								} else if(i > 0) {
									//					debugger; 
									if(d > mind) {//上一个距离与当前距离比较
										mind = mind;//保存上一个距离最小的
										index = index;//最小距离的index
									} else {
										mind = d;	
										index = i;
									}		
								}
							}
							
						}
						console.log(mind);
						console.log(index);
						//最近点的经纬度
						var orderlnglat = [jsonData[index].JD,jsonData[index].WD];
						//地图上最近点的显示
						var marker = new AMap.Marker({
					        position: orderlnglat
					    });
					    marker.setMap(map);
						
//						var content='<div class="info-title">高德地图</div><div class="info-content">' +jsonData[index].shop_name
//					            '<br/>' +jsonData[index].address+'<br/>'+jsonData[index].mobile+
//					            '</div>';
						content='<div class="info-title">高德地图</div><div class="info-content">' +
				            '<h6>' +jsonData[index].shop_name+'</h6>'+
				            '<p>地点:'+jsonData[index].address+'</p>' +
				            '<span>联系电话:'+jsonData[index].mobile+'</span>'+
				            '</div>';
//				 AMap.event.addListener(marker, 'click', function() { //点击marker出现信息窗体

				  	map.plugin("AMap.AdvancedInfoWindow",function(){
					    var  infowindow1 = new AMap.AdvancedInfoWindow({
					        content: content,
					        offset: new AMap.Pixel(0, -30)   
					    	});
					   
					    infowindow1.open(map,orderlnglat);
					});
				 });
					
//				});
					AMap.event.addListener(geolocation, 'error', function(err) {
						console.log(err);
					}); //返回定位出错信息
				});

			}
		</script>
	</body>

</html>